<template>
  <div id="app">
    <div class="search-box">
      <el-form :inline="true" ref="form" :model="conditions" label-width="80px">
        <el-form-item label="讲师名称">
          <el-input
            v-model="conditions.name"
            placeholder="请输入讲师名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲师头衔">
          <el-select v-model="conditions.level" placeholder="请选择讲师头衔">
            <el-option label="首席讲师" value="1"></el-option>
            <el-option label="高级讲师" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="value1"
            type="daterange"
            :default-time="['00:00:00']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- 点击这个按钮就会触发查询 -->
        <el-form-item>
          <el-button @click="initTeacher(1, 7)" type="primary">查询</el-button>
          <el-button @click="clean" type="warning">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="teacher-box">
      <el-table
        :data="teacherResult.list"
        border
        @selection-change="selectChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="讲师名称" width="120">
        </el-table-column>
        <el-table-column label="讲师头衔" width="120">
          <!-- slot-scope="xx":xx是随便取的一个名字
      xx:是list集合
      xx.row:是集合里面的每个对象
      xx.row.level:每个对象里面的level属性
       -->
          <template slot-scope="scope">
            {{ scope.row.level == 1 ? "首席讲师" : "高级讲师" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="career"
          :show-overflow-tooltip="true"
          label="讲师简介"
        >
        </el-table-column>
        <el-table-column
          prop="intro"
          :show-overflow-tooltip="true"
          label="讲师资历"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="gmtCreated" label="添加时间" width="160">
        </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间" width="160">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template slot="header">
            <el-button @click="deleteAll" icon="el-icon-delete" type="danger"
              >批量删除</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="updateTeacher(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteTeacher(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page-box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="teacherResult.totalCount"
        :page-size="7"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      ids:[],
      conditions: {
        name: "",
        level: "",
        startTime: "",
        endTime: "",
      },
      teacherResult: {
        list: [],
        totalCount: 0,
      },
    };
  },
  created() {
    this.initTeacher(1, 7);
  },
  methods: {
    initTeacher(currentPage, limit,conditions) {
      if(this.value1!=null){
        this.conditions.startTime = this.value1[0];
        this.conditions.endTime = this.value1[1];
      }
      this.$http
        .post("/teacher/showTeacher/" + currentPage + "/" + limit,this.conditions)
        .then((res) => {
          this.teacherResult = res.data.data;
        });
    },
    //每次选择复选框后触发这个按钮
    selectChange(val) {
      this.ids=[];
      for (let i = 0; i < val.length; i++) {
        const teacher = val[i];
        this.ids.push(teacher.id);
      }
    },
    //批量删除函数
    deleteAll() {
      //为什么要传key=value呢 ？因为是变量，最方便。restfu风格不行，因为数组是一个对象。json不行，因为要java一定要封实体类来接
      let formDate = new FormData();
      formDate.append("ids", this.ids);
      this.$http
        .post("/teacher/deleteTeacherAll", formDate, {
          Headers: {
            //contenttype:application/json
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除讲师成功!",
          });
          this.initTeacher(1, 7);
        });
    },
    //修改按钮
    updateTeacher(teacher) {
      this.$router.push("/updateTeacher/" + teacher.id);//跳页面并传参
    },
    //删除按钮
    deleteTeacher(teacher) {
      this.$confirm("您是否要删除" + teacher.name, "删除讲师", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        this.$http.get("/teacher/deleteTeacher/" + teacher.id).then((res) => {
          this.$message({
            type: "success",
            message: "删除讲师成功!",
          });
          this.initTeacher(1, 7);
        });
      });
    },
    //当用户点击页面改变页面时触发的函数
    currentChange(currentPage) {
      this.initTeacher(currentPage, 7);
    },
    //清除按钮 会把输入框内容清空
    clean(){
      this.conditions = {
        name: "",
        level: "",
        startTime: "",
        endTime: "",
      };
      this.value1=[];
      this.initTeacher(1,7);
    }
  },
};
</script>

<style scoped>
.teacher-box {
  height: 500px;
}
.page-box {
  text-align: center;
}
</style>
